import React from "react";
import { message } from "antd";
import { BrowserRouter as Router, Routes, Route, Navigate } from "react-router-dom";
import ChatBox from "./pages/ChatBox";
import LanguageRouteWrapper from "./components/LanguageRouteWrapper";
import "./locales/i18n";

import type { MessageInstance } from "antd/es/message/interface";

export const MessageContext = React.createContext<MessageInstance>(
  {} as MessageInstance,
);

const App = () => {
  const [messageApi, contextHolder] = message.useMessage();
  return (
    <MessageContext.Provider value={messageApi}>
      {contextHolder}
      <Router>
        <Routes>
          <Route path="/" element={<Navigate to="/zh" replace />} />
          <Route path="/:lang" element={
            <LanguageRouteWrapper>
              <ChatBox />
            </LanguageRouteWrapper>
          } />
          <Route path="/:lang/*" element={
            <LanguageRouteWrapper>
              <ChatBox />
            </LanguageRouteWrapper>
          } />
        </Routes>
      </Router>
    </MessageContext.Provider>
  );
};

export default App;
